iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0
自我挑戰組

純新手學習 JavaScript系列 第 15

新手學習JavaScript:day15 - 變數的更新與傳遞

  • 分享至 

  • xImage
  •  

在之前的文章介紹了變數的宣告以及有效範圍,接下來我們來聊聊變數更新與傳遞吧!但在這之前我們先來簡單複習一下基本型別與物件型別。

基本型別與物件的比較

var a = 5;
var b = 5;
var c = "bob";
var d = "bob";

console.log(a === b); //true
console.log(a === c); //false
console.log(c === d ); // true

相信現在大家現在看基本型別的比較,應該是沒有太大的問題。當我們判斷變數是否相等的時候,是比較兩變數的內容,也就是「值」。

那物件呢?直接來看範例:

var obj1 = {name: "will"};
var obj2 = {name: "will"};

console.log(obj1 === obj2); //false

為什麼會是false呢?這是因爲在物件的情況下,我們應該把它看作是一個實體。以上面的範例來想像一下,有兩個名子都叫做will的,但他們其實是兩個不同的人,只是名子剛好一樣而已。

接下來我們就來看看基本型別與物件的變數更新與傳遞

基本型別的更新與傳遞
直接來看看範例:

var a = 5;
var b = a;

console.log(a); //5
console.log(b); //5

在上面的範例中,先宣告變數a並指派5,然後我們在宣告變數b並指派a給它,印出a、b都印出5。前面我們有提到說基本型別的變數,我們是看裡面的「值」。在這裡b的值是透過複製a的值而來的。
再進一步來看,那改變a會不會連動影響b?

var a = 5;
var b = a;

console.log(a); //5
console.log(b); //5

a = 150;

console.log(a); //150
console.log(b); //5

從結果來看是不影響的,也再次證明「b的值是透過複製a的值」,所以,a和b是獨立的,當a內容後來被更改,也不會影響b。這情況我們稱為「傳值」(pass by value)。

物件型別的更新與傳遞
一樣讓我們直接來看範例:

var obj1 = {value: 10};
var obj2 = obj1;

console.log(obj1.value); //10
console.log(obj2.value); //10

目前看起來跟基本型別差不多,那如果改變obj1的value會影響obj2嗎?

var obj1 = {value: 10};
var obj2 = obj1;

console.log(obj1.value); //10
console.log(obj2.value); //10

obj1.value = 150;

console.log(obj1.value); //150
console.log(obj2.value); //150

console.log(obj1 === obj2); //true

從上面範例可發現obj2跟著改變了,而且obj1與obj2是同ㄧ個實體。所以說物件並不是以傳值的方式來傳遞資料,那它是怎麼傳遞資料呢?它其實是透過「引用」的方式傳遞資料。 可以想像一開始obj1宣告之後放在記憶體某個位置,然後當我們指派給obj2的時候,是將這個位置告訴obj2,所以當我們改變obj1的時候會會連動改變obj2,因為obj其實是指向obj1,這也是為什麼兩個變數會相等。這樣的傳遞方式稱作「傳址」(pass by reference)。

所以JavaScript變數傳遞是「傳值」與「傳址」嗎?讓我們明天再揭曉了!大家明天見!


上一篇
新手學習JavaScript:day14 - 變數的有效範圍(2)
下一篇
新手學習JavaScript:day16 - 變數的更新與傳遞(2)
系列文
純新手學習 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言